﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>批量输入控件的提交</title>
    <link type="text/css" href="/AjaxPK/css/StyleSheet.css" rel="Stylesheet" />
    <script type="text/javascript" src="/AjaxPK/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/AjaxPK/js/jquery.form.js"></script>
    
    <style type="text/css">
    input.Name { width: 60px }
    input.Age { width: 50px }
    input.Address { width: 80px }
    input.Tel { width: 80px }
    input.Email { width: 120px }
    </style>
</head>
<body>

<form id="form1" action="/ajax/pk/DemoPk/BatchAddCustomer.cspx" method="post">
	<p><b>批量新增客户资料</b></p>
	<table border="0">
	<tr><td>Name</td><td>Age</td><td>Address</td><td>Tel</td><td>Email</td></tr>
	<tr><td><input type="text" name="Name" class="Name" value="A1" /></td>
		<td><input type="text" name="Age" class="Age" value="20" /></td>
		<td><input type="text" name="Address" class="Address" value="武汉" /></td>
		<td><input type="text" name="Tel" class="Tel" value="12345678" /></td>
		<td><input type="text" name="Email" class="Email" value="test1@163.com" /></td></tr>
	<tr><td><input type="text" name="Name" class="Name" value="A2" /></td>
		<td><input type="text" name="Age" class="Age" value="20" /></td>
		<td><input type="text" name="Address" class="Address" value="上海" /></td>
		<td><input type="text" name="Tel" class="Tel" value="22222222" /></td>
		<td><input type="text" name="Email" class="Email" value="" /></td></tr>
	<tr><td><input type="text" name="Name" class="Name" value="A3" /></td>
		<td><input type="text" name="Age" class="Age" value="20" /></td>
		<td><input type="text" name="Address" class="Address" value="武汉" /></td>
		<td><input type="text" name="Tel" class="Tel" value="" /></td>
		<td><input type="text" name="Email" class="Email" value="test3@163.com" /></td></tr>
	<tr><td><input type="text" name="Name" class="Name" value="" /></td>
		<td><input type="text" name="Age" class="Age" value="" /></td>
		<td><input type="text" name="Address" class="Address" value="" /></td>
		<td><input type="text" name="Tel" class="Tel" value="" /></td>
		<td><input type="text" name="Email" class="Email" value="" /></td></tr>
	<tr><td><input type="text" name="Name" class="Name" value="A5" /></td>
		<td><input type="text" name="Age" class="Age" value="" /></td>
		<td><input type="text" name="Address" class="Address" value="" /></td>
		<td><input type="text" name="Tel" class="Tel" value="12345678" /></td>
		<td><input type="text" name="Email" class="Email" value="" /></td></tr>
	</table>
	<p>说明：每行数据只有当Name，Age，Tel有效时，整行数据才有效。</p>
	<input type="submit" name="batchAddCustomer" value="保存客户资料" />
	
	<input type="button" id="btnAddCustomer" value="保存客户资料" />
</form>
<hr />
<p><b>服务器返回的结果（服务端把有效的输入结果转换成XML格式）：</b></p>
<textarea id="output" cols="20" rows="50" style="width: 90%; height: 400px"></textarea>



<script type="text/javascript">
$(function(){
	
	$("#form1").ajaxForm({
		success:function(result){
            $("#output").val(result);
        }
	});
	
	// 第二种方法，由某个控件的Click事件触发表单提交。
	$("#btnAddCustomer").click(function(){
		$("#form1").ajaxSubmit({
		    url: "/ajax/pk/DemoPk/BatchAddCustomer2.cspx",
			success:function(result){
				$("#output").val(result);
			}
		});
	});


});

</script>


</body>
</html>
